<!-- 秒杀导航栏 -->
<template>
  <div>
    <div class="box">
        <div class="left">
            <div @click="fun1"></div>
        </div>
        <div><p>京东秒杀</p></div>
        <div class="right" @click="fun"><div>
        </div>
    </div>
    </div>
    <div class="box1" v-if="flag">
        <div class="box-1">
            <p><van-icon name="home-o" size="17"/></p>
            <div>首页</div>
        </div>
        <div class="box-2">
            <p><van-icon name="apps-o" size="17" /></p>
            <div>分类搜索</div>
        </div>
        <div class="box-3">
            <p><van-icon name="cart-o" size="17"/></p>
            <div>购物车</div>
        </div>
        <div class="box-4">
            <p><van-icon name="contact" size="17" /></p>
            <div>我的京东</div>
        </div>
        <div class="box-5">
            <p><van-icon name="browsing-history-o" size="17"/></p>
            <div>浏览记录</div>
        </div>
        <div class="box-6">
            <p><van-icon name="share-o" size="17"/></p>
            <div>分享</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            flag:false
        }
    },
    methods: {
        fun (){
            this.flag = !this.flag
        },
        fun1(){
            this.$router.back()
        }
    }
}
</script>

<style scoped>
   .box {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
   }
   .box .left {
    width: 40px;
    height: 44px;
   }

   .box .left div{
    margin:12px 0 0 10px;
    width: 20px;
    height: 20px;
    background: url(../../../assets/img/1.png) no-repeat 50%;
    background-size:contain;
    background-position: 0 0;
   }
   .right {
    width: 40px;
    height: 44px;
   }
   .right div {
    margin: 12px 12px 12px 10px;
    width: 20px;
    height: 20px;
    background: url(../../../assets/img/2.png) no-repeat 50%;
    background-size:20px;
   }
   .box1 {
    width: 125px;
    height: 240px;
    background-color: #eee;
    background-color: black;
    opacity: 0.9;
    border-radius: 5px;
    position: absolute;
    top:44px;
    right:10px;
    z-index: 1000;
   }
   .box1 > div {
    display: flex;
    width: 125px;
    height: 40px;
    color: #fff;
    font-size: 14px;
   }
   .box-1 div {
    border-bottom: 1px solid #eee;
    width: 85px;
    line-height: 40px;
   }
   .box-2 div {
    border-bottom: 1px solid #eee;
    width: 85px;
    line-height: 40px;
   }
   .box-3 div {
    border-bottom: 1px solid #eee;
    width: 85px;
    line-height: 40px;
   }
   .box-4 div {
    border-bottom: 1px solid #eee;
    width: 85px;
    line-height: 40px;
   }
   .box-5 div {
    border-bottom: 1px solid #eee;
    width: 85px;
    line-height: 40px;
   }
   .box-6 div {
    width: 85px;
    line-height: 40px;;
   }
   .box-1 p {
    width: 40px;
    text-align: center;
   }
   .box-2 p {
    width: 40px;
    text-align: center;
   }
   .box-3 p {
    width: 40px;
    text-align: center;
   }
   .box-4 p {
    width: 40px;
    text-align: center;
   }
   .box-5 p {
    width: 40px;
    text-align: center;
   }
   .box-6 p {
    width: 40px;
    text-align: center;
   }
</style>